<template>
    <div class="visit">
        <h1>来访人员报备</h1>
        <div class="VForm">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name" readonly>
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="ruleForm.gender" placeholder="请选择你的性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="健康码" prop="healthCode">
                    <el-select v-model="ruleForm.healthCode" placeholder="请选择健康码颜色">
                        <el-option label="绿码" value="绿码"></el-option>
                        <el-option label="黄码" value="黄码"></el-option>
                        <el-option label="红码" value="红码"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="居住地" prop="region">
                    <el-cascader size="large" :options="options" v-model="ruleForm.selectedOptions"
                        @change="handleChange" />
                </el-form-item>
                <el-form-item label="来访时间" required>
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="离开时间" required>
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date2" style="width: 100%;"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
export default {
    data() {
        return {
            options: regionData,
            selectedOptions: [],
            ruleForm: {
                name: '',
                gender: '',
                phone: '',
                healthCode: '',
                selectedOptions: 'selectedOptions',
                region: '',
                date1: '',
                date2: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择你的性别', trigger: 'change' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' }
                ],
                healthCode: [
                    { required: true, message: '请选择健康码颜色', trigger: 'change' }
                ],
                region: [
                    { required: true, message: '请选择目的地', trigger: 'change' }
                ],
                date1: [
                    { type: 'string', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'string', required: true, message: '请选择时间', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        handleChange() {
            var loc = ''
            for (let i = 0; i < this.ruleForm.selectedOptions.length; i++) {
                loc += CodeToText[this.ruleForm.selectedOptions[i]]
            }
            console.log(loc)// 输出区域码所对应的属性值即中文地址
            this.ruleForm.region = loc;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                    console.log(this.ruleForm);
                    this.$router.push({
                        path: '/index/user/recordv',
                        query: {
                            getV: JSON.stringify(this.ruleForm)
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    }
}
</script>

<style scoped>
.visit h1 {
    margin: 20px 50px 30px 0;
}

.visit .VForm {
    margin: 0 auto;
    padding-right: 50px;
    width: 500px;
}

.visit .VForm /deep/.el-form-item__label {
    font-size: 18px;
}

.visit .VForm /deep/.el-form-item__label::after {
    content: "：";
    font-weight: bold;
}
</style>